import React from "react";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Button,
    Divider,
    Grid,
    makeStyles,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Typography
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspaceRounded"

import {Toolbar} from "../../shared/components";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)},
    accordionTitle: {backgroundColor: theme.palette.grey[200]}
}));

const ViewRoute = ({onClose, data, ...props}) => {
    const classes = useStyle();

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="View Route"
                actions={<React.Fragment>
                    <Button variant="outlined" onClick={onClose} startIcon={<KeyboardBackspaceIcon/>}>Back</Button>
                </React.Fragment>}
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    {data && <Grid container spacing={3} alignItems={"center"}>
                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Route Code</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.route_code}</Typography>
                        </Grid>
                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Name</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.name}</Typography>
                        </Grid>
                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Source</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.source}</Typography>
                        </Grid>
                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Destination</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.destination}</Typography>
                        </Grid>
                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Distance Cycle</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.std_distance_cycle}</Typography>
                        </Grid>
                        <Grid item xs={12}><Divider/></Grid>

                        <Grid item xs={6}>
                            <Typography variant={'h5'}>Cycle Hours</Typography>
                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant={'body1'}>{data.std_cycle_hours}</Typography>
                        </Grid>

                        {data.route_planner && <React.Fragment>
                            <Grid item xs={12}><Divider/></Grid>
                            <Grid item xs={12}>
                                <Typography variant={'h5'}>Route Planner</Typography>
                            </Grid>

                            <Grid item xs={12}>
                                <Accordion defaultExpanded elevation={0}>
                                    <AccordionSummary
                                        id="planned-stoppages-header"
                                        expandIcon={<ExpandMoreIcon/>}
                                        className={classes.accordionTitle}
                                    >
                                        <Typography variant={"h6"}>Route Stops</Typography>
                                    </AccordionSummary>
                                    <AccordionDetails>
                                        <Table size="small">
                                            <TableHead>
                                                <TableRow>
                                                    <TableCell align={"justify"}>Distance</TableCell>
                                                    <TableCell align={"justify"}>Estimated Arrival Time</TableCell>
                                                    <TableCell align={"justify"}>Stop Duration</TableCell>
                                                    <TableCell align={"justify"}>Address</TableCell>
                                                </TableRow>
                                            </TableHead>
                                            {data.route_planner && <TableBody>
                                                {data.route_planner.route_stops.map(stop => (
                                                    <TableRow key={stop.id}>
                                                        <TableCell align={"justify"}>{stop.distance}</TableCell>
                                                        <TableCell
                                                            align={"justify"}>{stop.estimated_arrival_time}</TableCell>
                                                        <TableCell align={"justify"}>{stop.stop_duration}</TableCell>
                                                        <TableCell
                                                            align={"justify"}>{stop.address?.address1}</TableCell>
                                                    </TableRow>
                                                ))}
                                            </TableBody>}
                                        </Table>
                                    </AccordionDetails>
                                </Accordion>
                            </Grid>
                        </React.Fragment>}
                    </Grid>}
                </Paper>
            </Grid>
        </Grid>
    );
};

export default ViewRoute;
